import React, { useState } from 'react';
import { Modal, Form, message } from 'antd';
import LimitInput from '@/components/LimitInput';
import UserSelect from './UserSelect';
import { changeHandoverDeal } from '../../service';

function DesignateModal({
    fetchList,
    designateVisible,
    setDesignateVisible,
    currentDealEmployeeName,
    employeeCode,
    id,
    form
}) {
    const [submitLoading, setSubmitLoading] = useState(false);
    const [changeEmployeeName, setChangeEmployeeName] = useState('');
    const { getFieldDecorator, validateFields } = form;
    const handleSubmit = () => {
        validateFields(async (err, values) => {
            if (err) return;
            const params = {
                id,
                changeEmployeeName,
                ...values
            };
            try {
                setSubmitLoading(true);
                const { code, msg } = await changeHandoverDeal(params);
                if (code === 10000) {
                    message.success('修改成功！');
                    fetchList();
                    setDesignateVisible(false);
                } else {
                    message.error(msg);
                }
                setSubmitLoading(false);
            } catch (e) {
                setSubmitLoading(false);
            }
        });
    };
    return (
        <Modal
            visible={designateVisible}
            title="修改处理人"
            width={520}
            confirmLoading={submitLoading}
            onCancel={() => setDesignateVisible(false)}
            onOk={handleSubmit}
        >
            <Form labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
                <Form.Item label="原处理人" style={{ margin: '14px 0' }}>
                    {currentDealEmployeeName}
                </Form.Item>
                <Form.Item label="新处理人">
                    {getFieldDecorator('changeEmployeeCode', {
                        rules: [
                            {
                                required: true,
                                message: '请选择'
                            }
                        ],
                        onChange: (e, val) => {
                            setChangeEmployeeName(val.props.children);
                        }
                    })(<UserSelect popupForBody employeeCode={employeeCode}></UserSelect>)}
                </Form.Item>
                <Form.Item label="原因">
                    {getFieldDecorator('changeCurrentDealEmployeeReason')(
                        <LimitInput area rows={4} placeholder="请输入" maxLength={4000} />
                    )}
                </Form.Item>
            </Form>
        </Modal>
    );
}

export default Form.create()(DesignateModal);
